<template>
  <div id="carder">
    <el-row :gutter="20">
      <el-col :lg="{ span:6 }" v-for="img in imgIds_data" :key="img.id" :offset="0" >
        <div class="grid-content ep-bg-purple common-layout">
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <el-row :gutter="20">
                  <el-col :span="12" class="img_id_txt">
                      <span>{{ img }}</span>
                  </el-col>
                  <el-col :span="12">
                      <el-button class="primary" @click=toBigImgPage(img) >
                          查看详情
                      </el-button>
                  </el-col>
                </el-row>
              </div>
            </template>
            <div>
              <a :href=getDetailUrl(img) >
                  <el-image class="small_img" :src=getImgData(img) fit="fill" loading="lazy" align="center" />
              </a>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-row>
    </el-row>
  </div>
</template>

<script>
import {inject} from 'vue'
import axios from "axios";
import {useRoute} from 'vue-router';
export default {
  name: "RightImgCarder",
  props: {
    tags: Array,
    page: Number,
    sept: Number,
    teen: Boolean,
    refresh:Number,
  },
  data() {
    return {
      imgIds_data: [],
      imgs_blob_data: {
      },
      myBaseURL: inject('$baseURL'),
      myVueURL: inject('$vueURL'),
    }
  },
  components: {
  },
  methods: {
    getPageImgInfo: async function(tags,page,sept,teenMode){
      let re_data;
      let t_tags = tags;
      if(tags.length === 0)
      {
        t_tags = []
      }
      console.log("开始获取数据")
      // await 声明等待异步操作执行完毕
      await axios({
        method:'post',
        url:'/search/imgIdFromTags',
        baseURL:this.myBaseURL,
        //responseType:'json',
        data:{
          tags: t_tags,
          page:[page,sept],
          teen: [teenMode]   // false
        }
      }).then(function(response) {
        let res = response.data
        //res = JSON.stringify(response)
        //console.log(res)
        re_data = res
      });
      return re_data
    },
    getImgBase64Url: function (img){
      //console.log(img)
      // 使用 base64 展示图片
      const src = "data:image/jpg;base64," + img
      // blob方法需要先将 图片字符串转换成 blob（数组） 比较麻烦
      //const blob = new Blob([img.data], { type: 'img/jpg' })
      //const url = window.URL.createObjectURL(blob)
      return src
    },
    toBigImgPage: function (img_id){
      this.$router.push({path: '/imgDetail/'+img_id} )
    },
    getDetailUrl:function (img_id){
        //http://192.168.1.212:8778/     // http://192.168.214.154:8778/  192.168.214.154
        return '/imgDetail/'+img_id;  //this.myBaseURL+
    },
    getSmallImgBlob: async function (img_id) {
      let blob_url = "";
      await axios({
        //http://localhost:8090/img/getSmallImg?id=201035324
        method: 'get',
        url: '/source/getSmallImg',  //getBlobFromId   getSmallImg
        baseURL: this.myBaseURL,
        responseType: 'blob',
        params: {
          id: img_id,
        }
      }).then(function (response) {
        // blob方法需要先将 图片字符串转换成 blob（数组） 比较麻烦
        //const src = "data:image/jpg;base64," + response

        const blob = new Blob([response.data], {type: 'img/jpg'})
        blob_url = window.URL.createObjectURL(blob)
        // let imgdao = document.getElementById(img_id)  //img_id
        // imgdao.setAttribute("src",blob_url)

      });
      return blob_url
    },
    getImgData: function (img_id){
      let img_bolb = this.imgs_blob_data.get(img_id)
      return img_bolb
    },
    getQueryVariable: function(variable){
      let query = window.location.search.substring(1);
      let vars = query.split("&");
      for (let i=0;i<vars.length;i++) {
        let pair = vars[i].split("=");
        if(pair[0] === variable){return pair[1];}
      }
      return false;
    },
  },
  mounted: function () {   /* mounted 挂载后的执行的函数 */
    //console.log(this.imgs_blob_data)
    console.log("执行子组件内 mounted函数")
  },
  //监听函数
  watch: {
    '$route' () {
      //console.log("执行子组件内路由监听函数")
    },
    refresh(){
      //console.log("子组件内监听refresh函数执行！")
      //console.log(this.tags)
      //数据更新
      //console.log(this.imgs_blob_data)
      this.imgs_blob_data = new Map()
      //this.tags =
      let t_tags = this.tags;
      let t_page = this.page;
      let t_sept = this.sept;
      let t_teen = "false";

      if(this.teen === true){
          t_teen = "true";
      }

      if(isNaN(t_page))
      {
        t_page = 1
      }
      if(isNaN(t_sept))
      {
        t_sept = 32
      }
      // await 声明等待异步操作执行完毕
      this.getPageImgInfo(t_tags,t_page,t_sept,t_teen).then(res=>{
        let img_data = res
        this.imgIds_data = img_data;
        // console.log(res)   // undefine
        img_data.forEach((is_imgid)=>{
          this.getSmallImgBlob(is_imgid).then(res=>{
            this.imgs_blob_data.set(is_imgid,res)
          })
        })
      })
    },
    tags: function (){
    },
    props: function (){
      //
      //console.log("子组件内参数变化监听函数")
    }
  },
  setup(){
    const route = useRoute() //获取到值
    //console.log("执行了setup函数")
    let query = route.query;
    return {
      query,
    }
  }
}

</script>

<style scoped>
.img_id_txt{
  display: flex;
  justify-content: center;
  align-items: center;
}
.card-header{
  height: 20%;
}
.box-card{
  height: 400px;
  margin: 10px;
}
</style>
